<template>
  <van-row>
    <van-col :span="labelWidth">{{ label }}：</van-col>
    <van-col :span="contentWidth" :class="class">
      <slot></slot>
    </van-col>
  </van-row>
</template>

<script>
import { Row, Col } from 'vant';

export default {
  components: {
    'van-row': Row,
    'van-col': Col,
  },
  props: {
    label: String,
    labelWidth: {
      type: Number,
      default: 6,
    },
    class: String,
  },
  computed: {
    contentWidth() {
      return 24 - this.labelWidth
    },
  },
  data() {
    return {}
  },
}
</script>

<style lang="less">
.van-row {
  margin: 0 15px 10px 0;
  align-items: center;
  vertical-align: middle;

  > .van-col {
    &:first-of-type {
      display: inline-block;
      line-height: 34px;
      vertical-align: middle;
      text-align: right;
      padding-right: 2px;
    }

    .form-control {
      width: 100%;
      display: inline-block;
      line-height: 32px;
      border-radius: 4px;
      padding: 0 6px;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    &.range {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      > .form-control {
        flex: 1;
      }

      > b {
        content: '~';
        width: 25px;
        text-align: center;
        display: inline-block;
      }
    }

    > .van-checkbox-group {
      align-items: center;

      > .van-checkbox {
        word-break: keep-all;
        min-height: 34px;
      }
    }
  }
}
</style>
